//  JavaScript校验要求：
//  1. 每一项都必须填写内容或者做出选择， 不能存在空项；++ ++ ++ ++ +
//  2. 用户名： 只能包含英文字母和下划线， 长度为6 - 18 个字符；++ ++ ++ ++
//  3. 密码： 必须包含英文字母大小写和数字， 长度不能少于6个字符；++ ++ ++
//  4. 确认密码： 必须与密码相同；++ ++ ++ ++ +
//  5. 联系电话： 确保手机号码的有效性；++ ++ ++ ++ +
//  6. 电子邮箱： 确保电子邮箱的有效性；++ ++ ++ ++ +
//  7. 如果用户没有按照以上要求输入信息， 则当光标离开该项时， 在该项的右侧用红色字体给出相应的提示信息。++ ++ ++

var mainEL = document.getElementById('main');
var formEL = document.getElementById('form');
var sumbitEL = document.getElementById('sumbit');
var cancelEL = document.getElementById('cancel');
var username = document.getElementById("username");
var password = document.getElementById("password");
var confirmPassword = document.getElementById("confirmPassword");
var hobbys = document.getElementsByName("hobby");
var phone = document.getElementById("phone");
var email = document.getElementById("email");
var YHMerror = document.getElementById('YHMerror');
var MMerror = document.getElementById('MMerror');
var QRMMerror = document.getElementById('QRMMerror');
var AHerror = document.getElementById('AHerror');
var LXDHerror = document.getElementById('LXDHerror');
var DZYXerror = document.getElementById('DZYXerror');

function setWidth() {
  if (YHMerror.innerText === "" && MMerror.innerText === "" && QRMMerror.innerText === "" && AHerror
    .innerText === "" && LXDHerror.innerText === "" && DZYXerror.innerText === "") {
    setWidth1('400px')
  } else {
    setWidth1('640px')
  }
}
// 用户名
function YHMonblus() {
  // var reN =/^\d{6,18}$/;
  var re = /^[a-zA-Z_]{6,18}$/;
  if (username.value == "") {
    YHMerror.innerText = " * 请输入用户名";
  } else if (username.value.length < 6 || username.value.length > 18) {
    YHMerror.innerText = " * 格式错误,长度应为6-18个字符";
  } else if (!re.test(username.value)) {
    YHMerror.innerText = " * 格式错误,只能包含英文字母和下划线";
  } else {
    YHMerror.innerText = "";
  }
  setWidth()
}

function YHMonfocu() {
  YHMerror.innerText = "";
}
// 密码
function MMonblus() {
  var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{6,}$/;
  // var reg=/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
  if (password.value == "") {
    MMerror.innerText = " * 请输入密码";
  } else if (password.value.length < 6) {
    MMerror.innerText = " * 格式错误,密码长度至少为6位";
  } else if (!re.test(password.value)) {
    MMerror.innerText = " * 格式错误,必须包含英文字母和数字";
  } else {
    MMerror.innerText = "";
  }
  setWidth()
}

function MMonfocu() {
  MMerror.innerText = "";
}

// 确认密码
function QRMMonblus() {
  if (confirmPassword.value == "") {
    QRMMerror.innerText = " * 请输入确认密码";
  } else if (password.value != confirmPassword.value) {
    QRMMerror.innerText = " * 两次密码输入不一致";
  } else {
    QRMMerror.innerText = "";
  }
  setWidth()
}

function QRMMonfocu() {
  QRMMerror.innerText = "";
}

// 性别
function XBonblus() {
  // var radios = document.getElementsByName("gender");
  // if(radios.checked == false){
  //      document.getElementById('XBerror').innerText="请选择性别";
  //  }else {
  //      document.getElementById('XBerror').innerText ="";
  //  }
}

function XBonfocu() {
  //  document.getElementById('XBerror').innerText ="";
}

// 爱好
function AHonblus() {
  if (hobbys[0].checked == false && hobbys[1].checked == false && hobbys[2].checked == false &&
    hobbys[3].checked == false) {
    AHerror.innerText = " * 请选择爱好";
  } else {
    AHerror.innerText = "";
  }
  setWidth()
}

function AHonfocu() {
  AHerror.innerText = "";
}
// 联系电话
function LXDHonblus() {
  var re = /^1\d{10}$/;
  if (phone.value == "") {
    LXDHerror.innerText = " * 请输入联系电话";
  } else if (!re.test(phone.value)) {
    LXDHerror.innerText = " * 电话格式输入错误";
  } else {
    LXDHerror.innerText = "";
  }
  setWidth()
}

function LXDHonfocu() {
  LXDHerror.innerText = "";
}
//    电子邮箱
function DZYXonblus() {
  var re = /[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}/;
  if (email.value == "") {
    DZYXerror.innerText = " * 请输入电子邮箱";
  } else if (!re.test(email.value)) {
    DZYXerror.innerHTML = " * 邮箱格式不正确";
  } else {
    DZYXerror.innerText = "";
  }
  setWidth()
}

function DZYXonfocu() {
  DZYXerror.innerText = "";
}

sumbitEL.onclick = sumbit

function sumbit() {
  if (mainEL.style.width === '400px' || mainEL.style.width === '') {
    if (username.value == "") {
      YHMerror.innerText = " * 请输入用户名";
      setWidth1('640px')
    } else if (password.value == "") {
      MMerror.innerText = " * 请输入密码";
      setWidth1('640px')
    } else if (confirmPassword.value == "") {
      QRMMerror.innerText = " * 请输入确认密码";
      setWidth1('640px')
    } else if (hobbys[0].checked ==
      false && hobbys[1].checked == false && hobbys[2].checked == false && hobbys[3].checked == false) {
      AHerror.innerText = " * 请选择爱好";
      setWidth1('640px')
    } else if (phone.value == "") {
      LXDHerror.innerText = " * 请输入联系电话";
      setWidth1('640px')
    } else if (email.value == "") {
      DZYXerror.innerText = " * 请输入电子邮箱";
      setWidth1('640px')
    } else {
      alert('信息填写正确,注册成功!')
      clearText()
    }
  } else {
    alert('信息填写不正确，请重新输入!')
  }
}

cancelEL.onclick = cancel

function setWidth1(str) {
  formEL.style.width = str;
  mainEL.style.width = str;
}

function cancel() {
  clearText()
  clearError()
}

function clearText() {
  username.value = ""
  password.value = ""
  confirmPassword.value = ""
  hobbys[0].checked = false
  hobbys[1].checked = false
  hobbys[2].checked = false
  hobbys[3].checked = false
  phone.value = ""
  email.value = ""
}

function clearError() {
  YHMerror.innerText = ""
  MMerror.innerText = ""
  QRMMerror.innerText = ""
  AHerror.innerText = ""
  LXDHerror.innerText = ""
  DZYXerror.innerText = ""
  formEL.style.width = '400px';
  mainEL.style.width = '400px';
}